<template>
	<view>
		
		
		
		<view class="pageContainer">
			<view class="messageBox">
				<view class="messageItem" v-for="(item,index) in messageList" :key="index">
					<view class="messageTop">
						<view class="messageIcon">
							<image src="/static/message/messageIcon2.png" mode="" v-if="item.um_type=='notice'"></image>
							
							<image src="/static/message/messageIcon2.png" mode="" v-if="item.um_type=='apply'"></image>
							<image src="/static/message/messageIcon1.png" mode="" v-if="item.info.title=='记账修改通知' || item.info.title=='记账删除通知'"></image>
							
							<image src="/static/message/messageIcon4.png" mode="" v-if="item.info.title=='记工修改通知' || item.info.title=='记工删除通知'"></image>
						</view>
						<view class="messageTitle">
							<!-- <text v-if="item.um_type=='notice'">消息公告</text>
							<text v-if="item.um_type=='apply'">审批通知</text>
							<text v-if="item.um_type=='integral'">审批通知</text> -->
							{{item.info.title}}
						</view>
						<view class="messageTime">
							{{item.add_time_str}}
						</view>
					</view>
					<view class="messageMain" v-if="item.info.textList==0">
						{{item.info.content}}
					</view>
					
					<view class="messageMain" v-else>
						<text v-for="(itemText,itemIndex) in item.info.textList" :key="itemIndex">{{itemText}}</text>
					</view>
					<view class="messageBtn" v-if="item.um_type=='apply' && item.memberInfo.quit==10">
						<text class="red" @click="applyDoing(index,'11')">拒绝</text>
						<text @click="applyDoing(index,'0')">同意</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 分页 -->
		<view class="dataEmpty_con">
			<!-- 数据为空 -->
			<u-empty v-if="messageList.length==0"></u-empty>
			<!-- 加载更多 -->
			<view class="loadmore_box" v-if="messageList.length>0">
				<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 记工最新消息
				recordNew: {},
				extend: {},
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				messageList: [],
			}
		},
		onLoad(option) {

		},
		onShow() {
			var _this = this;
			_this.pages = 1;
			_this.getMessageList();
		},
		onReady() {

		},

		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {

			// 获取列表
			getMessageList() {
				var _this = this;
				_this.$u.get('/api/user.message/getList', {
					pages: _this.pages,
					limit: _this.limit,
					status: 'all'
				}).then(res => {
					uni.hideLoading();
					var messageList = _this.messageList;
					if (_this.pages == 1) {
						messageList = [];
					}
					_this.messageList = messageList.concat(res.data);;
					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;

				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getMessageList();
				}, 2000)
			},

			applyDoing(index, status) {
				var _this = this;
				var messageList = _this.messageList;
				var ids = '';
				var memberIds = '';

				ids = messageList[index].id;
				memberIds = messageList[index].memberInfo.id;

				_this.$u.post('/api/project.member/apply_doing', {
					ids: ids,
					memberIds: memberIds,
					status: status,
				}).then(res => {
					uni.showModal({
						content: res.msg,
						showCancel: false,
					})
					_this.pages = 1;
					_this.getMessageList();
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.messageBox {
		padding: 0 30rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.messageItem {
		padding: 30rpx;
		background-color: $uni-color-white;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.messageTop {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.messageIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.messageIcon image {
		width: 100%;
		height: 100%;
	}

	.messageTitle {
		flex: 2;
		color: $uni-color;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0 20rpx;
	}

	.messageTime {
		color: $uni-color-text;
	}

	.messageMain {
		padding: 30rpx 0;
		overflow: hidden;
	}
	.messageMain text{
		display: block;
	}
	.messageBtn {
		text-align: right;
	}

	.messageBtn text {
		padding-left: 30rpx;
		padding-right: 10rpx;
		color: $uni-color-active;
	}

	.messageBtn text.red {
		color: #c00;
	}
</style>
